<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap -->
    <link
            href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
            rel="stylesheet"></link>
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css" rel="stylesheet"></link>

</head>
<body>
<div id="tree"></div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>
<script>
    var tree = [
        {
            text:"Parent 1",
            nodes: [
                {
                    text:"Child 1",
                    nodes: [
                        {
                            text:"Grandchild 1"
                        },
                        {
                            text:"Grandchild 2"
                        }
                    ]
                },
                {
                    text:"Child 2"
                }
            ]
        },
        {
            text:"Parent 2"
        },
        {
            text:"Parent 3"
        },
        {
            text:"Parent 4"
        },
        {
            text:"Parent 5"
        }
    ];
    class TreeView {
        constructor(){
            this.init();
        }
        init(){
            $("#tree").treeview({
                data: tree
            });
            $("#tree").on('nodeSelected', function (event, node) {
                console.log(node)
            });
        }
    }
    ;(function () {
        new TreeView();
    })();


</script>

</body>
</html>